<template>
<div class="baseUserRole">
  <!-- 按钮 -->
    <div class="btns">
      <el-form label="用户ID" size="small" inline style="text-align:center">
        <el-form-item label="用户ID" size="small" inline>
 <el-input v-model="param.userId" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="角色ID" size="small" inline>
 <el-input v-model="param.roleId" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="float:10" round plain type="primary" size="mini" icon="el-icon-search" @click="loadBaseUserRoles">搜索</el-button>
        </el-form-item>
      </el-form>
        <el-button plain round size="mini" style="float:right" @click="drawer = true" type="warning">点我打开</el-button>
        <el-button round plain type="primary" size="mini" icon="el-icon-edit" style="float:right" @click="toAddHandler">新增</el-button>
<el-drawer
  title="抽屉"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <span>大家往这里看!</span>
  <div id="container1" style="height:400px"></div>
</el-drawer>
    </div>
      <el-alert
    center
    title="用户角色模块"
    type="info"
    effect="dark">
  </el-alert>   <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
    <!-- /按钮 -->
    <!-- {{applications}} -->
    <!-- 表格 -->
    <el-table size="small" :data="baseUserRoles">
      <el-table-column type="index" :index="1" label="序号"></el-table-column>
      <el-table-column label="用户ID" prop="userId" align="center" sortable></el-table-column>
      <el-table-column label="角色ID" prop="roleId" align="center" sortable></el-table-column>
       <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button  plain type="primary" size="mini" round icon="el-icon-edit" @click="editHandler(scope.row)"
            >修改</el-button>
          <el-button style="float:140px" plain type="danger" icon="el-icon-delete" round size="mini" @click="deleteHandler(scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-badge :value="200" :max="99" class="item">
  <el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="100" :max="10" class="item">
  <el-button size="small" >回复</el-button>
</el-badge>
    <!-- /表格 -->
</div>
</template>

<script>
import {del,get,post} from '@/utils/request'
export default {
      // 页面数据
   // 页面数据
  data(){
    return {
       drawer: false,
        direction: 'rtl',
       param:{},
      baseUserRoles:[]
    }
  },
  // 页面渲染的时候会调用的函数
  created(){
    this.loadBaseUserRoles();
     console.log(this.$router);
  },
    mounted() {
      this.initChart();
  },
  // 所有的方法
  methods:{
    initChart(){
      var options= {
		chart: {
				type: 'pie',
				options3d: {
						enabled: true,
						alpha: 45
				}
		},
		title: {
				text: '用户管理信息统计3D饼状图'
		},
	
		plotOptions: {
				pie: {
						innerSize: 100,
						depth: 45
				}
		},
		series: [{
				name: '用户实名',
				data: [
						['技术专家1', 8],
						['技术专家2', 3],
						['超级管理员1', 1],
						['超级管理员2', 6],
						['普通用户1', 8],
						['普通用户2', 4],
						['王图图', 4],
						['刘敏', 1],
						['工作者', 1]
				]
		}]
};
var chart = Highcharts.chart('container1',options);
    
    },
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
     downloadHandler(){
      window.location.href="http://39.106.31.187:8888/baseUserRole/download"
    },
    editHandler(row) {
      this.$router.push({
        path: "/user/userRoleCreate",
        query: row,
      });
    },
   deleteHandler(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://39.106.31.187:8888/baseUserRole/deleteById";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loadBaseUserRoles();
        });
      });
    },
  toAddHandler(){
    this.$router.push("/user/userRoleCreate")
  },
    loadBaseUserRoles(){
      let url = 'http://39.106.31.187:8888/baseUserRole/query'
      get(url,this.param).then((resp)=>{
        this.baseUserRoles = resp.data;
      })
    }
  }
}
</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>